<template>
  <div class="app-container">
    <el-tabs :value="activeTab" @tab-click="onChangeTab">
      <el-tab-pane
        v-if="roleCheck(finaRechargeType.rechargeLogs)"
        :label="$t('language.finance.recharge.rechargeRecording')"
        :name="tabPanelType.rechargeLogs"
      >
        <el-tabs
          type="border-card"
          :value="subActiveTab"
          @tab-click="onSubChangeTab"
          v-if="activeTab === tabPanelType.rechargeLogs"
        >
          <el-tab-pane
            v-if="roleCheck(finaRechargeType.auto)"
            :name="tabPanelType.third"
             :label="$t('language.finance.recharge.tripartiteAutomaticDeposit')"
          >
            <RechargeLogs v-show="subActiveTab === tabPanelType.third" />
          </el-tab-pane>
          <el-tab-pane
            v-if="roleCheck(finaRechargeType.auto)"
            :name="tabPanelType.thirdRecord"
            :label="$t('language.finance.recharge.thirdPartyRechargeRecording')"
          >
            <RechargeLogsRecord v-show="subActiveTab === tabPanelType.thirdRecord" />
          </el-tab-pane>
          <el-tab-pane
            v-if="roleCheck(finaRechargeType.manual)"
            :name="tabPanelType.transfer"
             :label="$t('language.finance.recharge.transferOfFunds')"
          >
            <RechargeTransferLogs v-show="subActiveTab === tabPanelType.transfer" />
          </el-tab-pane>
          <el-tab-pane
            v-if="roleCheck(finaRechargeType.manual)"
            :name="tabPanelType.transferRecord"
            :label="$t('language.finance.recharge.transferRechargeRecord')"
          >
            <RechargeTransferRecord v-show="subActiveTab === tabPanelType.transferRecord" />
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane
        v-if="roleCheck(finaRechargeType.repairAudit)"
        :name="tabPanelType.repairAudit"
        label="充值补单审核"
      >
        <ReorderAudit v-show="activeTab === tabPanelType.repairAudit"/>
      </el-tab-pane>
<!--      <el-tab-pane-->
<!--        v-if="roleCheck(finaRechargeType.exceptionRecharge)"-->
<!--        :name="tabPanelType.exceptionRecharge"-->
<!--        label="异常充值处理"-->
<!--      >-->
<!--        <Exceptions v-show="activeTab === tabPanelType.exceptionRecharge" />-->
<!--      </el-tab-pane>-->
      <el-tab-pane
        v-if="roleCheck(finaRechargeType.rechargeAmountSet)"
        :name="tabPanelType.rechargeAmountSet"
        label="充值金额设置"
      >
        <el-tabs
          type="border-card"
          :value="typeDepositActiveTab"
          @tab-click="onSubRechargeChangeTab"
          v-if="activeTab === tabPanelType.rechargeAmountSet"
        >
          <el-tab-pane
            :name="tabPanelType.ordinary"
            label="普通存款"
          >
            <RechargeLimitSetting
              :limitType="rechSettType.normalRecharge"
              v-show="typeDepositActiveTab === tabPanelType.ordinary"
            />
          </el-tab-pane>
          <el-tab-pane
            :name="tabPanelType.large"
            label="大额存款"
          >
            <RechargeLimitSetting
              :limitType="rechSettType.largeRecharge"
              v-show="typeDepositActiveTab === tabPanelType.large"
            />
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane
        v-if="roleCheck(finaRechargeType.rechargExceptiont)"
        :name="tabPanelType.rechargExceptiont"
        label="充值异常记录"
      >
        <RechargeExceptionRec
          v-show="activeTab === tabPanelType.rechargExceptiont"
        />
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>

// constants
import { finaRechargeType } from '@/router/financeRoutes';
import { rechSettType } from '@/const/payEnum';

// components
import RechargeLimitSetting from './rechargeLimitSetting';
import Exceptions from './exceptions';
import RechargeLogs from './logs';
import RechargeLogsRecord from './logsRecord';
import RechargeTransferLogs from './logsTransfer';
import RechargeTransferRecord from './logsTransferRecord';
import ReorderAudit from './reorderAudit';
import RechargeExceptionRec from './rechargeExceptionRec';

// mixins
import { tabs } from '@/build';

const tabPanelType = {
  rechargeLogs: 'one',
  third: 'rechargeLogs/third',
  thirdRecord: 'rechargeLogs/thirdRecord',
  transfer: 'rechargeLogs/transfer',
  transferRecord: 'rechargeLogs/transferRecord',

  repairAudit: 'two',

  exceptionRecharge: 'three',

  rechargeAmountSet: 'four',
  ordinary: 'rechargeAmountSet/ordinary',
  large: 'rechargeAmountSet/large',

  rechargExceptiont: 'five',
};

export default {
  name: 'finance-recharge',
  components: {
    Exceptions,
    ReorderAudit,
    RechargeLogs,
    RechargeLogsRecord,
    RechargeTransferLogs,
    RechargeTransferRecord,
    RechargeLimitSetting,
    RechargeExceptionRec,
  },
  mixins: [tabs],
  data() {
    return {
      finaRechargeType,
      rechSettType,
      tabPanelType,
      activeTab: tabPanelType.rechargeLogs,
      subActiveTab: tabPanelType.third,
      typeDepositActiveTab: tabPanelType.ordinary,
      test: '1',
    };
  },
  mounted() {
    // tab页记录访问日志
    this.$store.dispatch(types.SAVE_OPERATION_LOG, { content: _.getContent(this.$route, '充值记录-第三方充值', true) });
  },
  methods: {
    onChangeTab(data) {
      this.activeTab = data.name;
      this.$store.dispatch(types.SAVE_OPERATION_LOG, { content: _.getContent(this.$route, data.label, true) });
    },
    onSubChangeTab(data) {
      this.subActiveTab = data.name;
      this.$store.dispatch(types.SAVE_OPERATION_LOG, { content: _.getContent(this.$route, `充值记录-${data.label}`, true) });
    },
    onSubRechargeChangeTab(data) {
      this.typeDepositActiveTab = data.name;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
